import React from 'react'
import {Input, Button, List} from 'antd';

const TodoListUI = (props) => {
    return (
        <div>
            <div style={{marginTop: '10px', marginLeft: '10px'}}>
                <Input placeholder="Basic usage" style={{width: '300px'}} value={props.inputValue}
                       onChange={props.handleChange}/>
                <Button type="primary" onClick={props.handleBtnClick}>Buttons</Button>
            </div>
            <List bordered dataSource={props.list}
                  style={{marginTop: '10px', width: '300px', marginLeft: '10px'}}
                  renderItem={(item, index) => <List.Item
                      onClick={() => props.handleItemDelete(index)}>{item}</List.Item>}/>
        </div>
    )
}

export default TodoListUI